<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="carousel">
        <div class="images">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        </div>
        <div class="indicators">
        <span class="indicator active"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
        </div>
        <button class="prev">上一张</button>
        <button class="next">下一张</button>
    </div> -->
    <div id="table"></div>
    <!-- <table>
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </thead>
    </table> -->
    <script src="./jquery.js"></script>
    <script>
        $(document).ready(function(){
            let table = $("<table>")

            let headerRow = $("<tr>").append(
                $("<th>").text("姓名"),
                $("<th>").text("年龄"),
                $("<th>").text("城市"),
            );
            table.append(headerRow)
            let data = [
                { name: "张三", age: 25, city: "成都"},
                { name: "李四", age: 29, city: "上海"},
                { name: "王武", age: 28, city: "丽江"}
            ];
            //for(let i =0;i<data.length;i++){
            data.forEach(function(item){
                let row = $("<tr>").append(
                    $("<tr>").text(item.name),
                    $("<tr>").text(item.age),
                    $("<tr>").text(item.city)
                );
                table.append(row)
            })
            $ ("#table").append(table)   

            
        })
    </script>
</body>
<!-- <script>
    let currentIndex = 0;
    const images = $(".images img");
    const indicators = $(".indicator");
    function showImage(index) {
        images.hide();
        images.eq(index).show();
        indicators.removeClass("active");
        indicators.eq(index).addClass("active");
    }
    setInterval(function() {
        currentIndex = (currentIndex + 1) % images.length;
        showImage(currentIndex);
    }, 3000);
</script> -->
</html>